 $(document).ready(function(){
    //上传图片预览监控
    //$("#gallery_wrap").css({ width:"900px", heigh:"75", padding: "25px",margin:"0 auto" });
    $("#upload").uploadPreview({ width: 200, height: 200, imgDiv: "#preImgDiv", imgType: ["bmp", "gif", "png", "jpg"] });
    $("#upload").change(function(){
       $("#preImg_area").show();
    });
    random_load_photo();
	$("#random").click(function(){   
        $("#result").empty()
        $("#loading").append("<img src='/static/images/loading.gif' >");
        random_load_photo();
        
    });               
    $("#upload_tab").click(function(){                    
        $("#upload_tab").parent().addClass("current");
        $("#url_tab").parent().removeClass();
        $("#keyword_tab").parent().removeClass();                   
        $("#upload_area").show();
        $("#url_area").hide();
        $("#keyword_area").hide();
    });
    $("#url_tab").click(function(){                    
        $("#upload_tab").parent().removeClass();
        $("#url_tab").parent().addClass("current");
        $("#keyword_tab").parent().removeClass();                   
        $("#upload_area").hide();
        $("#url_area").show();
        $("#keyword_area").hide();
    });
    $("#keyword_tab").click(function(){                    
        $("#upload_tab").parent().removeClass();
        $("#url_tab").parent().removeClass();
        $("#keyword_tab").parent().addClass("current");                   
        $("#upload_area").hide();
        $("#url_area").hide();
        $("#keyword_area").show();
    });
    $("#file_submit").click(function(){                    
        alert("File Didn't work"); 
    });
    $("#url_submit").click(function(){                    
        url = $("#key_url").val();
        if(url.length){
            $("#url_pre_img").append("<img src='"+url+"' />");
            alert("URL Didn't work");
            /*
            $.ajax({
	  	        type: "post",
		        url: "/photo/search_by_url/",
                data:{"url":url},
	            success:function(data){
                    alert(data);
                }
            });
            */
        }else{
            alert("Please enter image URL");
        }
    }); 
    $("#keyword_submit").click(function(){                    
        alert("Keyword Didn't work"); 
    }); 
});

function random_load_photo(){
    $.ajax({
	  	type: "post",
		url: "/photo/random_photos/",
	    success:function(data){
            $("#loading").empty()
            $("#search_img_src").empty()
            $("#result").empty()
            if(data.stat == 'Ok'){
                $("#result").append(" Random fetch "+data.photos.length+" in "+data.count +" cost " + String(data.time).substring(0,6) +" s"  );
                $("#photos").empty();
                $("#photos").append("<ul class='filmstrip'></ul>");
	            dealWithData(data)
            }else{
                $("#result").append(data.stat);
            }
	    }
	});

}

function dealWithData(data){
    var strHtml="";
    if (data.method == 'random_photos'){
        $.each(data.photos,function(i,n){
            //var rep = n.link.split("##");
	        strLi="<li><img src='"+n.link.replace(/_m.jpg/,'_s.jpg')+"' alt='Effet du soleil' title='Effet du soleil' /></li>"; 
            $(".filmstrip").append(strLi);
	        strHtml+="<div class='panel'>"; 
	        strHtml+="<img src='"+n.link.replace(/_m.jpg/,'.jpg')+"' style='align:center;  margin:0 auto;'/>"; 
	        strHtml+="<div class='panel-overlay'>"; 
	        strHtml+="<h2>Title </h2>"; 
	        strHtml+="<p><button class='similar_serach'>Similar search</button></p>"; 
	        strHtml+="</div></div>";
        }); 
    }else if(data.method == 'find_by_photo'){
        $.each(data.similars,function(i,n){
            var rep = n.split("##");
	        strLi="<li><img src='"+rep[1].replace(/_m.jpg/,'_s.jpg')+"' alt='Effet du soleil' title='Effet du soleil' /></li>"; 
            $(".filmstrip").append(strLi);
	        strHtml+="<div class='panel'>"; 
	        strHtml+="<img src='"+rep[1].replace(/_m.jpg/,'.jpg')+"' style='align:center;  margin:0 auto;'/>"; 
	        strHtml+="<div class='panel-overlay'>"; 
	        strHtml+="<h2>Similarity = "+rep[0]+"</h2>"; 
	        strHtml+="<p><button class='similar_serach'>Similar search</button></p>"; 
	        strHtml+="</div></div>";
        });
    
    }        	            
	$("#photos").append(strHtml);
	initGalleryView();
    $(".similar_serach").click(function(){
        $("#loading").append("<img src='/static/images/loading.gif' >");
        p_url = $(this).parent().parent().parent().children().attr("src").replace(/.jpg/,'_m.jpg');
        $.ajax({
	        type: "post",
            data: {"url":p_url},
	        url: "/photo/find_by_photo/",
	        success:function(data){
                $("#loading").empty()
                $("#result").empty()
                $("#search_img_src").empty()
                $("#search_img_src").append("<img src='"+data.src+"' />")
                if (data.size){                    
                    $("#result").append(" Search result size "+data.size +" cost " + String(data.time).substring(0,6) +" s"  );
                    $("#photos").empty();
                    $("#photos").append("<ul class='filmstrip'></ul>");
                    dealWithData(data)
                }else{
                    $("#result").append(" Search result size "+data.size +" cost " + String(data.time).substring(0,6) +" s"  );
                }
                
            }
       });
    });
}

function initGalleryView(){
    $('#photos').galleryView({
	    panel_width: 900,
		panel_height: 550,
		frame_width: 75,
		frame_height: 75,
		transition_speed: 1200,
	    background_color: '#222',
	    border: 'none',
	  	easing: 'easeInOutBack',
	 	pause_on_hover: true,
        overlay_height: 72,
        overlay_text_color: 'white',
	    filmstrip_position: 'top',
		overlay_position: 'top'
	});
}
